<template>
	<view>
		<!-- 待付款 -->
		<!-- start -->
		<!--<view class="obligation_header" v-show="obligationStatus">
			<image src="../../../static/images/obligation_03.png" mode="aspectFit"></image>
			<text>等待买家付款</text>
		</view>-->
		<!-- end -->
		
		<!-- 已完成 -->
		<!-- statr -->
		<!--<view class="obligation_header" v-show="!obligationStatus">
			<image src="../../../static/images/completed_03.png" mode="aspectFit"></image>
			<text>订单已完成。</text>
		</view>-->
		<!-- end -->
		
		<!-- 待发货 -->
		<!-- start -->
		<!--<view class="obligation_header" v-show="sendGoodsStatus">
			<image src="../../../static/images/sendGoods_03.png" mode="aspectFit"></image>
			<text>卖家已发货，等待确认。</text>
		</view>-->
		<!-- end -->
		<view class="obligation_header">
			<image src="../../../static/images/sendGoods_03.png" v-if="orderStatus == 'receiving'" mode="aspectFit"></image>
			<image src="../../../static/images/completed_03.png" v-if="orderStatus == 'success'" mode="aspectFit"></image>
			<image src="../../../static/images/obligation_03.png" v-if="orderStatus == 'obligation'" mode="aspectFit"></image>
			<image src="../../../static/images/ship_03.png" v-if="orderStatus == 'shipments'" mode="aspectFit"></image>
			<image src="../../../static/images/completed_03.png" v-if="orderStatus == 'afterSale'" mode="aspectFit"></image>
			<text>{{ orderStatusData }}</text>
		</view>
		
		<view class="address" v-for="(receiptDate,index) in receiptDateList" :key="index">
			<view class="address_top">
				<view class="address_top_left">
					<image src="../../../static/images/Positioning_icon_03.png"></image>
				</view>
				<view class="address_top_right">
					<view class="Receiver">
						<view>收货人：{{receiptDate.receiver}}</view>
						<view>{{receiptDate.phone}}</view>
					</view>
					<view class="Shipping_address">
						收货地址：{{receiptDate.area+receiptDate.Address}}
					</view>
				</view>
			</view>
			<view class="bg"></view>
		</view>
		<!-- 已完成 -->
		<!-- statr -->
		<view v-if="orderStatus == 'receiving' || orderStatus == 'success'">
			<view class="logistics">
				<view class="logistics_left">
					<image src="../../../static/images/logistics_03.png"></image>
				</view>
				<view class="logistics_right" v-if="get_express_info_data_list_type ==='object'">
					<view>{{ get_express_info_data_list.status }}</view>
					<view>{{ get_express_info_data_list.time }}</view>
				</view>
				<view v-else class="logistics_right">
					<view>{{ get_express_info_data_list }}</view>
				</view>
			</view>
			<view class="bg"></view>
		</view>
		<!-- end -->
		<view class="indentList">
			<text class="list_id">订单序列号：{{orderNumber}}</text>
			<view class="indentList_items" v-for="(itemList,index) in indentList" :key="index">
				<view class="indentList_item">
					<view class="item_img">
						<image :src="itemList.item_img" mode="widthFix"></image>
					</view>
					<view class="item_content">
						<view>{{itemList.item_content_message}}</view>
					</view>
					<view class="item_price">
						<text>￥{{itemList.item_price}}</text>
						<text>x{{itemList.item_price_count}}</text>
						<!-- 已完成（七天内） -->
						<!-- start -->
						<button class="redButton" v-if="canReturn" style="margin-top:20upx;" @click="toApplySale(index)">申请售后</button>
                        <button class="redButton" v-if="canRefund" style="margin-top:20upx;" @click="showRefundReason(index)">申请退款</button>
						<!-- end -->
					</view>
				</view>
			</view>
		</view>
		<view class="orderPrice">
			<view class="orderPrice_item">
				<view>商品总价</view>
				<view>￥{{ sellingPrice }}</view>
			</view>
			<view class="orderPrice_item">
				<view>运费</view>
				<view>{{ postage }}</view>
			</view>
			<view class="orderPrice_item">
				<view>优惠</view>
				<view>{{ preference }}</view>
			</view>
			<view class="orderPrice_item">
				<view>订单总价</view>
				<view>￥{{ orderPrice }}</view>
			</view>
		</view>
		<view class="actualPayment">
			<view>实付款</view>
			<view>￥{{ payPrice }}</view>
		</view>
		<view class="bg"></view>
		<view class="orderMessage">
			<view class="orderMessage_item">
				<text>订单编号：</text>
				<text>{{orderNumber}}</text>
				<button @click="orderNumberCopy">复制</button>
			</view>
			<view class="orderMessage_item">
				<text>下单时间：</text>
				<text>{{ orderTime }}</text>
			</view>
			<!-- 待收货 -->
			<!-- start -->
			<view class="orderMessage_item">
				<text>{{expressName}}快递单号：</text>
				<text>{{expressNumber}}</text>
				<button @click="expressNumberCopy">复制</button>
			</view>
			<!-- end -->
		</view>
		<view class="operate_button">
			<!-- 待付款 -->
			<!-- start -->
			<view v-if="orderStatus == 'obligation'">
				<button class="greyButton" @click="canceltogglePopup('cancel')">取消订单</button>
				<button class="redButton" @click="toPay">去支付</button>
			</view>
			<!-- end -->
			
			<!-- 已完成（七天后） -->
			<!-- start -->
			<view v-if="orderStatus == 'obligation'">
				<button class="redButton" @click="deletetogglePopup('delete')">删除订单</button>
			</view>
			<!-- end -->
			
			<!-- 待收货 -->
			<!-- start -->
			<view v-if="orderStatus == 'receiving'">
				<button class="greyButton" @click="order_tracking">订单跟踪</button>
				<button class="redButton" @click="receiverGoods">收货</button>
			</view>
			<!-- end -->
			
			<!-- 待发货 -->
			<!-- start -->
			<view v-if="orderStatus == 'shipments'">
				<button class="redButton" @click="shipmentstogglePopup('shipments')">提醒发货</button>
			</view>
			<!-- end -->
		</view>
		<!-- 取消订单弹窗 -->
		<view class="cancelOrder">
			<popupCancel :show="type === 'cancel'" position="bottom" mode="fixed"  @hidePopup="canceltogglePopup('')"></popupCancel>
		</view>
		<!-- 删除订单弹窗 -->
		<view class="deleteOrder" v-if="showdeletetogglePopup">
			<popupDelete :show="type === 'delete'" position="middle" mode="fixed"  @hidePopup="deletetogglePopup('')"></popupDelete>
		</view>
		<!-- 提醒发货弹窗 -->
		<view class="shipmentsOrder" v-if="showshipmentstogglePopup">
			<popupShipments :show="type === 'shipments'" position="middle" mode="fixed"  @hidePopup="shipmentstogglePopup('')"></popupShipments>
		</view>
		<!-- 退货原因弹窗 -->
		<view class="goods_return">
			<popupGoods :show="type === 'goods'" position="bottom" mode="fixed"  @hidePopup="goodstogglePopup('')"></popupGoods>
		</view>
		<!-- 退款原因弹窗 -->
		<view class="money_return">
			<popupMoney :refund-reason="refundReason" :show="type === 'money'" position="bottom" mode="fixed"  @hidePopup="hidePopup" :mony="listItems" @refundReason="toRefund"></popupMoney>
		</view>
	</view>
</template>

<script>
	import popupCancel from '@/components/uni-popupCancel/uni-popupCancel.vue'
	import popupDelete from '@/components/uni-popupDelete/uni-popupDelete.vue'
	import popupShipments from '@/components/uni-popupShipments/uni-popupShipments.vue'
	import popupGoods from '@/components/uni-popupGoods/uni-popupGoods.vue'
	import popupMoney from '@/components/uni-popupMoney/uni-popupMoney.vue'
	export default {
		components: {
			popupCancel,
			popupDelete,
			popupShipments,
			popupGoods,
			popupMoney
		},
		data() {
			return {
				receiptDateList:[
					{
						receiver:"白云",
						phone:"18812341234",
						area:"广东省深圳市龙岗区",
						Address:"坂田街道中兴路顺兴区空中花 园H栋"
					},
				],
				orderId: null,
				orderItem: [],
				indentList:[],
				orderNumber:"",
				orderStatus: '',
				orderStatusData: '',
				//已完成(七天内)
				canReturn: false,
				canRefund: false,
				refundIndex: null,				
				//弹窗
				type: '',
				expressName: "",
				expressNumber: "",
				orderTime: null,
				listItems:[],
				get_express_info_data_list: null,
				get_express_info_data_list_type: '',
				sellingPrice: '',
				orderPrice: '',
				payPrice: '',
				postage: '',
				preference: 0,
				orderInfoID:"",
                refundReason: [],
				reason: '',
				showdeletetogglePopup:true,
				showshipmentstogglePopup:true
			}
		},
		onLoad(option) {
			let self = this;
			console.log(option);
			let orderInfo = JSON.parse(option.orderInfo);
			this.orderId = orderInfo.id;
			self.$store.commit('getOrderId',orderInfo.id);
			this.orderNumber = orderInfo.orderNo;
			//this.getListItems();
			uni.request({
				url: this.$store.state.URL + 'order/order/line_item',
				data: {
					token: this.$store.state.token,
					id: orderInfo.id
				},
				success(res) {
					//payPrice: 支付价格
					//orderPrice：订单总价
					//sellingPrice：商品总价
					console.log(res.data);
                    if(res.data.status){
					let orderItem = res.data.data.order_item;
					let order = res.data.data.order;
					self.orderStatus = order.orderStatus;
					self.orderStatusData = order.orderStatus_data;
					self.sellingPrice = order.sellingPrice;
					self.orderPrice = order.orderPrice;
					self.payPrice = order.payPrice;
					self.postage = order.postage;
			              	if(order.$after_application == 'true'){  //
							self.canReturn = true;  //退货
						}else{
							self.canReturn = false;
						}
						if(self.orderStatus == 'shipments'){  //待发货状态
							self.canRefund= true;  //退款
						}else{
							self.canRefund = false;
						}
					self.expressName = order.shipCompany;
					self.expressNumber = order.shipNumber;
					self.orderTime = self.formatDate(order.payTime);
					for(let i=0; i<orderItem.length; i++){
						let item = {
							item_img: orderItem[i].goodImg,
							item_content_message: orderItem[i].goodName,
							item_price: orderItem[i].sellingPrice,
							item_price_count: orderItem[i].num,
							goodId: orderItem[i].goodID,
						};
						self.indentList.push(item);
					}
					if(self.orderStatus == 'success' || self.orderStatus == 'receiving'){
						self.get_express_info_data_list = order.get_express_info_data_list;
						if(typeof self.get_express_info_data_list === 'object'){
							self.get_express_info_data_list_type = 'object';
						}
					}
                                   	}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none',
						})
					}
 
				},
				fail(e) {
					console.log(e);
				}
			})
		},
		methods: {
            toRefund(reason){  //退款
			    this.reason = reason;
			    let self = this;
			    console.log(this.indentList[this.refundIndex]);
			    uni.request({
			    	url: this.$store.state.URL+'order/order/user_after_sale',
			    	data: {
			    		token: this.$store.state.token,
			    		order_id: this.orderId,
			    		goodID: this.indentList[this.refundIndex].goodId,
						afterReason: '',
						img_banner: '',
						reason: this.reason,
						type: 'refund',
						num: this.indentList[this.refundIndex].item_price_count,
			    	},
			    	success(res) {
			    		console.log(res.data);
			    		if(res.data.status){
							uni.showToast({
								title: '申请成功',
								duration: 2000,
							})
			    			uni.navigateTo({
			    				url:"../../afterSaleStatus/refundProcessing/refundProcessing?afterNo="+res.data.afterNo
			    			})
			    		}
			    	},
			    	fail(e) {
			    		console.log(e);
			    	}
			    })	
			},
			showRefundReason(index){
				this.refundIndex = index;
				let self = this;
				uni.request({
					url: this.$store.state.URL+'order/order/show_after',
					data: {
						token: this.$store.state.token,
						id: this.orderId,
						goodID: this.indentList[this.refundIndex].goodId,
					},
					success(res) {
						console.log(res.data);
						if(res.data.status){
							if(res.data.data.type == 'salesReturn'){
								self.refundReason = res.data.data.reason;
								console.log(self.refundReason);
							}
							self.type = 'money';
						}
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			formatDate(now) {
				var time = new Date(now);
			    var year = time.getFullYear(); 
				var month = time.getMonth()+1; 
				var date = time.getDate(); 
				var hour = time.getHours(); 
				var minute = time.getMinutes(); 
				var second = time.getSeconds(); 
				return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
			},
			// 复制订单号到剪切板
			orderNumberCopy(){
				uni.setClipboardData({
					data: this.orderNumber,
					success: function () {
						uni.showToast({
							title:"已复制订单编号",
							duration:1000,
						})
					}
				});
			},
			// 复制快递单号到剪切板
			expressNumberCopy(){
				uni.setClipboardData({
					data: this.expressNumber,
					success: function () {
						uni.showToast({
							title:"已复制快递单号",
							duration:1000,
					    })
			        }
			    });
			},
			// 弹窗
			//start
			canceltogglePopup(type) {  //取消订单弹窗
			    this.type = type;
			},
			deletetogglePopup(type) {  //删除订单弹窗
				let that=this;
				uni.request({
					url: this.$store.state.URL + '/order/order/user_delete_order',
					data:{
						token: this.$store.state.token,
						order_id: that.orderId,
					},
					success(res) {
						console.log(res.data);
						that.type = type;
						setTimeout(function(){
							that.showdeletetogglePopup=false
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1000)
						},1000)
					}
				})
			},
			shipmentstogglePopup(type) { //提醒发货弹窗
			    let that=this;
			    uni.request({
			    	url: this.$store.state.URL + '/order/order/remind_the_delivery',
			    	data:{
			    		token: this.$store.state.token,
			    		order_id: that.orderId,
			    	},
					success(res){
						console.log(res);
						that.type = type;
						setTimeout(function(){
							that.showshipmentstogglePopup=false
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1000)
						},1000)
					}
				})
			},
			goodstogglePopup(type) { //退货原因弹窗
				this.type = type;
			},
	        hidePopup(confirm) { //退款原因弹窗
			    if(confirm){
					this.toRefund();
				}
				this.type = null;
			},
			onBackPress() {
				if (this.type !== '') {
					this.type = '';
					return true;
				}
			},
			// end
			
			//跳转售后
			toApplySale(index){
				uni.navigateTo({
					url:"../../tabBar/membershipService/applySale/applySale?orderId="+this.orderId+'&goodId='+this.indentList[index].goodId
				})
			},
			//跳转订单跟踪
			order_tracking(){
				uni.navigateTo({
					url:"../orderTrack/orderTrack?orderInfoID="+this.orderInfoID
				})
			},
			getListItems(){
				let that = this;
				uni.request({
					url: this.$store.state.URL + '/order/order/refund_order_show',
					data: {
						token: this.$store.state.token
					},
					success(res) {
						that.listItems = res.data;
						// console.log(res);
					},
					fail() {
						console.log("orderDetails 306 line to fail");
					}
				});
			},
			//去支付
			toPay(){
				let that=this
				uni.request({
					 url: this.$store.state.URL + '/order/order/order_continue_pay',
					 data:{
						 token: this.$store.state.token,
						 orderNo: that.orderNumber,
					 },
					 method:"POST",
					 success(res) {
						let payment = res.data.data.data;
						let timeStamp = payment.timeStamp.toString();
						console.log("payment"+payment);
						 uni.hideLoading();
						 uni.requestPayment({
							provider: 'wxpay',
							timeStamp: timeStamp,
							nonceStr: payment.nonceStr,
							package: payment.package,
							signType: payment.signType,
							paySign: payment.paySign,
							success: function (res) {
								uni.showToast({
									title:"支付成功",
									duration:1000,
									icon:"none",
									mask:true
								});
								console.log('success:' + JSON.stringify(res));
							},
							fail: function (err) {
								uni.showToast({
									title:"支付失败",
									duration:1000,
									icon:"none",
									mask:true
								})
								console.log('fail:' + JSON.stringify(err));
							},
						});
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			//收货
			receiverGoods(){
				let that=this
				uni.request({
				 	url: this.$store.state.URL + '/order/order/take_delivery',
					data: {
						token: this.$store.state.token,
						order_id:  that.orderId,
					},
					success(res) {
						console.log(res);
						if(res.data.status==true){
							uni.showToast({
								title:"收货成功"
							})
						}else{
							uni.showToast({
								title:res.data.data,
								icon:"none"
							})
						}
						
					}
                })
			}
		}
	}
</script>

<style>
  .obligation_header{
	  width:100%;
	  height:170upx;
	  background:#f2526f;
  }
  .obligation_header image{
	  width:123upx;
	  height:103upx;
	  margin-left:94upx;
	  margin-top:30upx;
	  margin-right: 30upx;
	  vertical-align: middle;
  }
  .obligation_header text{
	  font-size: 28upx;
	  color:#fff;
  }
  .Receiver{
  	display: flex;
  	justify-content: space-between;
  	height:40upx;
  	line-height: 40upx;
  }
  .Receiver view:nth-of-type(1){
  	font-size:32upx;
  	color:#222222;
  	margin-bottom: 10upx;
  }
  .Receiver view:nth-of-type(2){
  	font-size:24upx;
  	color:#222222;
  	margin-right:20upx;
  }
  .Shipping_address{
  	font-size:24upx;
  	color:#7b7b7b;
  }
  .address{
  	background: #fff;
  	width:100%;
  	height:auto;
  	padding:20upx 0;
  	margin-bottom: 20upx;
  }
  .address_top{
  	display: flex;
	padding:20upx 0;
  }
  .address_top_left{
  	margin-left:30upx;
  }
  .address_top_right{
  	margin-left:20upx;
  }
  .address_top_left image{
  	width:43upx;
  	height:52upx;
  	margin:26upx 0;
  }
  .bg{
	  width:100%;
	  height:30upx;
	  background:#F5F5F5;
  }
  .list_id{
	  font-size:24upx;
	  color:#999999;
	  margin-left:30upx;
	  margin-top:30upx;
	  display: block;
  }
  .indentList_items{
	  margin-top:30upx;
	  border-bottom: 1upx solid #e0e0e0;
	  padding-bottom: 30upx;
  }
  .item_img{
	  margin-left:15upx;
  }
  .item_img image{
	  width:167upx;
	  heihgt:147upx;
  }
  .indentList_item{
	  display:flex;
	 /* justify-content: space-around; */
	 padding-right: 30upx;
  }
  .item_content{
	  margin-left:10upx;
  }
  .item_content view:nth-of-type(1){
	  font-size:30upx;
	  color:#222222;
	  line-height: 20px;
      height: 40px;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      width:370upx;
      word-wrap:break-word; 
  }
  .item_content view:nth-of-type(2){
	  font-size:24upx;
	  color:#999;
	  margin-top:30upx;
  }
  .item_price{
	  text-align: right;
  }
  .item_price text:nth-of-type(1){
	  font-size:26upx;
	  color: #333333;
	  display: block;
	  font-weight: 600;
  }
  .item_price text:nth-of-type(2){
  	  font-size:24upx;
  	  color: #999;
	  display: block;
	  margin-top:20upx;
  }
  .orderPrice{
	  padding:20upx 30upx;
	  border-bottom: 1upx solid #e0e0e0;
  }
  .orderPrice_item{
	  display: flex;
	  justify-content: space-between;
  }
  .orderPrice_item view{
	  font-size:24upx;
	  color:#999999;
	  margin:5upx 0;
  }
  .actualPayment{
	  padding: 40upx 30upx;
	  display: flex;
	  justify-content: space-between;
  }
  .actualPayment view:nth-of-type(1){
	  font-size:28upx;
	  color:#333333;
  }
  .actualPayment view:nth-of-type(2){
  	  font-size:28upx;
  	  color:#f2526f;
  }
  .orderMessage{
	  padding: 40upx 30upx;
	  border-bottom: 10upx solid #f8f8f8;
  }
  .orderMessage_item text:nth-of-type(1){
	  font-size:28upx;
	  color: #666;
  }
  .orderMessage_item text:nth-of-type(2){
  	  font-size:28upx;
  	  color: #333;
  }
  .orderMessage_item button{
	  font-size: 22upx;
	  color:#999;
	  background:#fff;
	  border:1upx solid #efefef;
	  width:auto;
	  heigh:40upx;
	  display: inline-block;
	  border-radius: 40upx;
	  position: relative;
	  top:18upx;
	  left:45upx;
  }
  .operate_button{
	  display: flex;
	  justify-content: flex-end;
	  padding:40upx 20upx;
  }
  .greyButton{
	  color:#999;
	  border:1upx solid #cccccc;
	  width:auto;
	  height:50upx;
	  font-size:24upx;
	  display: inline-block;
	  background: #fff;
	  border-radius: 50upx;
	  line-height: 50upx;
  }
  .redButton{
  	  color:#e94d6a;
  	  border:1upx solid #e94d6a;
	  margin-left: 20upx;
	  width:170upx;
	  height:50upx;
	  font-size:24upx;
	  display: inline-block;
	  background: #fff;
	  border-radius: 50upx;
	  line-height: 50upx;
  }
  /* 已完成 */
  .logistics{
	  display: flex;
  }
  .logistics_left image{
  	width:44upx;
  	height:45upx;
  	margin:26upx 0;
  }
  .logistics_left{
  	margin-left:30upx;
  }
  .logistics_right{
	  margin-left: 20upx;
  }
  .logistics_right view:nth-of-type(1){
	  font-size:28upx;
	  color: #0b9930;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  white-space:nowrap;
  }
  .logistics_right view:nth-of-type(2){
  	  font-size:24upx;
  	  color: #999;
	  margin-top:10upx;
  }
  /* 取消订单弹窗 */
  
</style>
